<div v-bind:class="[componentId]" class="app-management-view">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('management-applications.title')}} </h2>
        </template>
        <template v-if="!firstApp" v-slot:header-right>
            <el-button v-if="isGlobalAdmin" type="success" icon="el-icon-circle-plus" @click="createNewApp">{{i18n('common.add-new-app-button')}}</el-button>
        </template>
    </cly-header>
    <cly-main class="bu-pt-4">
        <div class="bu-columns bu-is-gapless">
            <div v-if="!firstApp" class="bu-column bu-is-3 bu-mr-5 app-management-list">
                <cly-listbox
                    skin="jumbo"
                    height="624"
                    :searchPlaceholder="appListCount"
                    :options="appList"
                    :searchable="true"
                    v-model="selectedSearchBar">
                        <template v-slot:option-prefix="option">
                            <div class="cly-vue-sidebar__app-image bu-mt-1 bu-mr-1" :style="{backgroundImage: 'url(' + apps[option.value].image + ')'}"></div>
                        </template>
                    </cly-listbox>
            </div>
            <div v-if="firstApp" class="bu-column bu-is-1"></div>
            <div v-if="firstApp" class="bu-column bu-is-3 bu-mr-5">
                <h1>{{i18n("management-applications.create-first-app-title")}}</h1>
                <p>{{i18n("management-applications.create-first-app-description")}}</p>
            </div>
            <div v-if="firstApp" class="bu-column bu-is-1"></div>
            <div :class="{'bu-column':true, 'bu-is-6':firstApp, 'bu-is-9':!firstApp}">
                <cly-more-options v-if="!newApp && isGlobalAdmin" size="small" class="bu-is-pulled-right" @command="handleMenuCommand">
                    <el-dropdown-item :disabled="isDisabled()" :class="{'el-dropdown-menu__item--divided__fix-broken':item.divided, 'add-border':!item.value}" :key="idx" v-for="(item, idx) in topOptions" :divided="item.divided" :command="item.value">
                        <el-link :disabled="isDisabled()" class="bu-ml-1">{{item.label}}</el-link>
                    </el-dropdown-item>
                </cly-more-options>
                <el-switch
                    v-if="!newApp && isGlobalAdmin"
                    v-model="apps[selectedApp].locked"
                    :active-text="apps[selectedApp].locked ? i18n('common.locked') : i18n('common.unlocked')"
                    @change="setAppLock"
                    class="bu-is-pulled-right bu-mr-4 bu-mt-1"
                    v-tooltip.top-start="apps[selectedApp].locked ? {content: i18n('management-applications.application-tooltip-locked-text')} 
                    : {content: i18n('management-applications.application-tooltip-unlocked-text')}">
                </el-switch>
                <h2 class="bu-mb-4"> {{apps[selectedApp] ? apps[selectedApp].name : i18n('common.add-new-app')}} </h2>
                <cly-section>
                    <div class="bu-columns bu-m-0">
                        <div class="bu-column bu-is-8 bu-py-5">
                            <cly-form
                                :initial-edited-object="apps[selectedApp] || newApp"
                                @submit="save"
                                ref="appForm">
                                <template v-slot="formScope">
                                    <cly-form-step :id="formId" class="app-section">
                                        <div style="display: flex;justify-content: space-between; line-height: 30px;">
                                            APP INFORMATION
                                            <el-button v-show="edited && (isGlobalAdmin || isAppAdmin)" @click="edit()" class="bu-mr-2" type="text">Edit</el-button>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.application-name')">
                                                {{formScope.editedObject.name}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field v-else rules="required" :label="i18n('management-applications.application-name')" prop="name">
                                                <el-input
                                                    :disabled="isDisabled()"
                                                    :placeholder="i18n('management-applications.application-name')"
                                                    v-model="formScope.editedObject.name">
                                                </el-input>
                                            </cly-inline-form-field>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.type')" :help="i18n('management-applications.type.hint')">
                                                {{formScope.editedObject.type}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field v-else rules="required" :label="i18n('management-applications.type')" :help="i18n('management-applications.type.hint')" prop="type">
                                                <el-select
                                                    :disabled="isDisabled()"
                                                    :placeholder="i18n('management-applications.type')"
                                                    v-model="formScope.editedObject.type">
                                                    <el-option :key="type" :value="type" :label="i18n('management-applications.types.' + type)" v-for="(item, type) in types"></el-option>
                                                </el-select>
                                            </cly-inline-form-field>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('countries.table.country')" :help="i18n('management-applications.country.hint')">
                                                {{formScope.editedObject.country}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field v-else rules="required" :label="i18n('countries.table.country')" prop="country" :help="i18n('management-applications.country.hint')">
                                                <cly-select-x
                                                    :disabled="isDisabled()"
                                                    :placeholder="i18n('countries.table.country')"
                                                    v-model="formScope.editedObject.country"
                                                    :options="countries">
                                                </cly-select-x>
                                            </cly-inline-form-field>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.time-zone')" :help="i18n('management-applications.time-zone.hint')">
                                                {{formScope.editedObject.timezone}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field v-else rules="required" :label="i18n('management-applications.time-zone')" prop="timezone"  :help="i18n('management-applications.time-zone.hint')">
                                                <cly-select-x
                                                    :disabled="isDisabled()"
                                                    :placeholder="i18n('management-applications.time-zone')"
                                                    v-model="formScope.editedObject.timezone"
                                                    :options="timezones">
                                                </cly-select-x>
                                            </cly-inline-form-field>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.checksum-salt')" :help="i18n('management-applications.checksum-salt.hint')">
                                                {{formScope.editedObject.salt}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field v-else :label="i18n('management-applications.checksum-salt')" prop="salt"  :help="i18n('management-applications.checksum-salt.hint')">
                                                <el-input
                                                    :disabled="isDisabled()"
                                                    :placeholder="i18n('management-applications.checksum-salt')"
                                                    v-model="formScope.editedObject.salt">
                                                </el-input>
                                            </cly-inline-form-field>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.app-id')" :help="i18n('management-applications.app-id.hint')">
                                                {{formScope.editedObject._id}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field v-if="!newApp && !edited" :label="i18n('management-applications.app-id')" prop="_id"  :help="i18n('management-applications.app-id.hint')">
                                                <el-input
                                                    readonly
                                                    onclick="select()"
                                                    :placeholder="i18n('management-applications.app-id')"
                                                    v-model="formScope.editedObject._id">
                                                </el-input>
                                            </cly-inline-form-field>
                                        </div>
                                        <div>
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.app-key')" :help="i18n('management-applications.app-key.hint')">
                                                {{formScope.editedObject.key}}
                                            </cly-inline-form-field>
                                            <cly-inline-form-field 
                                                v-else 
                                                prop="key" 
                                                :rules="rules(formScope.editedObject)" 
                                                :custom-messages="customMessages()"
                                                :label="i18n('management-applications.app-key')" 
                                                :help="i18n('management-applications.app-key.hint')"
                                            >
                                                <el-input
                                                    :readonly="isDisabled()"
                                                    onclick="select()"
                                                    :placeholder="i18n(newApp ? 'management-applications.app-key.generate' : 'management-applications.app-key')"
                                                    v-model="formScope.editedObject.key">
                                                </el-input>
                                            </cly-inline-form-field>
                                        </div>
										<div v-if="!newApp && apps[selectedApp] && apps[selectedApp].redirect_url">
                                            <cly-inline-form-field v-if="edited" :label="i18n('management-applications.redirect_url')" :help="i18n('management-applications.redirect_url.help')">
                                                {{formScope.editedObject.redirect_url}}
											</cly-inline-form-field>
											<cly-inline-form-field v-else rules="" :label="i18n('management-applications.redirect_url')" prop="redirect_url" :help="i18n('management-applications.redirect_url.help')">
												<el-switch
													:active-value="apps[selectedApp].redirect_url"
													inactive-value=" "
													:active-text = "apps[selectedApp].redirect_url"
													v-model="formScope.editedObject.redirect_url">
												</el-switch>
                                            </cly-inline-form-field>
                                        </div>
                                    </cly-form-step>
                                    <div v-if="newApp" class="bu-has-text-right" @mouseenter="formScope.validate()">
                                        <el-button
                                            :disabled="isDisabled() || !formScope.isSubmissionAllowed"
                                            @click="formScope.submit()"
                                            type="primary">{{i18n( newApp ? 'common.create' : 'common.apply')}}
                                        </el-button>
                                    </div>
                                    <cly-diff-helper 
                                        v-if="!edited" 
                                        :diff="compare(formScope.editedObject,apps[selectedApp])" 
                                        @discard="discardForm()" 
                                        @save="save(formScope.editedObject)"
                                        :disabled="isSaveDisabled(formScope.editedObject)"
                                    >
                                    </cly-diff-helper>
                                </template>
                            </cly-form>
                        </div>
                        <div v-if="!firstApp" class="account-settings-avatar-box bu-is-3 bu-column">
                            <div v-if="!newApp" class="bu-is-vcentered">
                                <p class="bu-has-text-weight-medium bu-mb-6" style="margin: 0px;font-size: 14px;">{{i18n('management-applications.icon')}}</p>
                                <div>
                                    <div class="account-settings-avatar" :style="app_icon"></div>
                                </div>
                                <p>&nbsp;</p>
                                    <el-upload
                                    v-if="!isDisabled() && (isGlobalAdmin || isAppAdmin)"
                                    action="apps/icon"
                                    :on-success="handleUploadSuccess"
                                    :data="uploadData"
                                    :show-file-list="showFileList"
                                    :limit="1"
                                    name="app_image"
                                    accept="image/png, image/jpeg, image/gif">
                                        <el-button size="small" type="text">Add Icon</el-button>
                                    </el-upload>
                                <p class="account-upload-instructions">{{i18n('management-applications.icon-error')}}</p>
                            </div>
                        </div>
                    </div>
                </cly-section>
                <cly-section>
                    <el-collapse v-if="!newApp" class="app-management-details" @change="loadDetails">
                        <el-collapse-item :title="i18n('management-applications.app-details')" name="1">
                            <div v-if="appDetails">
                                <cly-inline-form-field :label="i18n('management-applications.app-creator')">
                                    <div v-if="appDetails.app.owner === '' || appDetails.app.owner_id === ''">{{i18n("common.unknown")}}</div>
                                    <a v-else :href="'#/manage/users/' + appDetails.app.owner_id">{{appDetails.app.owner}}</a>
                                </cly-inline-form-field>
                                <cly-inline-form-field :label="i18n('management-applications.app-created-at')">
                                    <div v-html="appDetails.app.created"></div>
                                </cly-inline-form-field>
                                <cly-inline-form-field :label="i18n('management-applications.app-edited-at')">
                                    <div v-html="appDetails.app.edited"></div>
                                </cly-inline-form-field>
                                <cly-inline-form-field :label="i18n('management-applications.app-last-data')">
                                    {{appDetails.app.last_data}}
                                </cly-inline-form-field>
                                <h6 class="bu-mt-5 bu-ml-6 text-uppercase">{{i18n("management-applications.app-users")}}</h6>
                                <cly-inline-form-field :label="i18n('management-applications.global_admins')">
                                    {{ joinNameList(appDetails.global_admin) }}
                                </cly-inline-form-field>
                                <cly-inline-form-field :label="i18n('management-applications.admins')">
                                    {{ joinNameList(appDetails.admin) }}
                                </cly-inline-form-field>
                                <cly-inline-form-field :label="i18n('management-applications.users')">
                                    {{ joinNameList(appDetails.user) }}
                                </cly-inline-form-field>
                            </div>
                            <div v-else v-loading="true" style="height: 500px;"></div>
                        </el-collapse-item>
                    </el-collapse>
                </cly-section>
                <h3 class="bu-mb-2" v-if="!newApp && hasAppAdminRights">{{i18n('management-applications.plugins')}}</h3>
                <cly-section v-if="!newApp && hasAppAdminRights" >
                    <validation-observer ref="configObserver" v-slot="v">
                        <el-collapse class="app-management-details">
                            <el-collapse-item :title="value.title" :name="id" :key="id" v-for="(value, id) in appSettings">
                                <component v-if="value.component" v-bind:is="value.component" @change="onChange"></component>
                                <cly-inline-form-field v-else :key="key" :label="getLabelName(key)" v-for="(conf, key) in value.inputs">
                                        <el-input
                                            v-if="conf.input === 'el-input'"
                                            @input="onChange(key, $event)"
                                            :value="conf.value"
                                            v-bind="conf.attrs"
                                            >
                                        </el-input>
                                        <el-select
                                            v-else-if="conf.input === 'el-select'"
                                            @change="onChange(key, $event)"
                                            :value="conf.value"
                                            v-bind="conf.attrs">
                                            <el-option :key="option.value" :value="option.value" :label="option.label" v-for="option in conf.list"></el-option>
                                        </el-select>
                                        <cly-select-x
                                            v-else-if="conf.input === 'cly-select-x'"
                                            @change="onChange(key, $event)"
                                            :value="conf.value"
                                            :options="conf.list"
                                            v-bind="conf.attrs">
                                        </cly-select-x>
                                        <el-slider
                                            v-else-if="conf.input === 'el-slider'"
                                            @change="onChange(key, $event)"
                                            :value="conf.value"
                                            v-bind="conf.attrs">
                                        </el-slider>
                                        <el-button
                                            v-else-if="conf.input === 'el-button'"
                                            @click="conf.click()"
                                            v-bind="conf.attrs">
                                            {{conf.label}}
                                        </el-button>
                                        <el-switch
                                            v-else-if="conf.input === 'el-switch'"
                                            @change="onChange(key, $event)"
                                            :value="conf.value"
                                            v-bind="conf.attrs">
                                        </el-switch>
                                        <el-input-number
                                            v-else-if="conf.input === 'el-input-number'"
                                            @change="onChange(key, $event)"
                                            :max='2147483647'
                                            :min='0'
                                            :value="conf.value"
                                            v-bind="conf.attrs">
                                        </el-input-number>
                                        <el-input
                                            v-else
                                            @input="onChange(key, $event)"
                                            :value="conf.value">
                                        </el-input>
                                </cly-inline-form-field>
                            </el-collapse-item>
                        </el-collapse>
                        <cly-diff-helper :diff="changeKeys" @discard="onDiscard" @save="saveSettings" :disabled="v.invalid" :emitSaveWhenDisabled="true"></cly-diff-helper>
                    </validation-observer>
                </cly-section>
                <el-card class="box-card color-cool-gray-100" v-if="!newApp && isCode">
                    <p>{{i18n('common.integrate-sdks')}}</p>
                    <p><a href='https://code.count.ly' target='_blank'>Countly Code Generator </a>{{i18n('common.integrate-sdks-text')}}</p>
                    <p class="select-platforms">{{i18n('common.integrate-sdks-platforms')}}</p>
                    <div v-if="sdks" class="sdks" style="text-align: right">
                        <a :href="'http://code.count.ly/integration-' + code + '.html?server=' + server + '&app_key=' + apps[selectedApp].key" target='_blank' v-for="(value, code) in sdks" class="el-button el-button--primary is-plain">
                            {{value.name.replace("SDK", "")}}
                        </a>&nbsp;
                    </div>
                </el-card>
            </div>
        </div>
    </cly-main>
</div>